<template>
  <div class="order-detail">
    <el-card>
      <!-- 面包屑导航 -->
      <el-breadcrumb>
        <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/orderList' }"
          >订单管理</el-breadcrumb-item
        >
        <el-breadcrumb-item>订单详情</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 文字链接 -->
      <el-link
        class="text-link"
        icon="el-icon-arrow-left"
        :underline="false"
        @click="$router.go(-1)"
        >返回订单列表</el-link
      >
      <!-- 订单详情 -->
      <div class="detail-content">
        <el-row>
          <el-col :span="2">订单号：</el-col>
          <el-col :span="5">
            <el-tag>{{ orderDetail.orderID }}</el-tag>
          </el-col>
          <el-col :offset="7" :span="3">
            <el-tag>{{ orderDetail.date }}</el-tag>
          </el-col>
          <el-col :offset="1" :span="2">
            <el-tag v-if="orderDetail.status.status === 'paid'">待支付</el-tag>
            <el-tag v-if="orderDetail.status.status === 'raised'"
              >待自提</el-tag
            >
            <el-tag v-if="orderDetail.status.status === 'delivered'"
              >待配送</el-tag
            >
            <el-tag
              type="success"
              v-if="orderDetail.status.status === 'received'"
              >已收货</el-tag
            >
            <el-tag type="danger" v-if="orderDetail.status.status === 'refund'"
              >退款</el-tag
            >
            <el-tag type="info" v-if="orderDetail.status.status === 'cancel'"
              >取消</el-tag
            >
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="2">配送方式：</el-col>
          <el-col :span="2">
            <el-tag v-if="orderDetail.areaName.areaName === 'self'"
              >用户自提</el-tag
            >
            <el-tag v-if="orderDetail.areaName.areaName === 'sameCity'"
              >同城配送</el-tag
            >
            <el-tag v-if="orderDetail.areaName.areaName === 'crossCity'"
              >跨城配送</el-tag
            >
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="2">收货地址：</el-col>
          <el-col :span="2">联系人：</el-col>
          <el-col :span="2">
            <el-tag>{{ orderDetail.info.name }}</el-tag>
          </el-col>
          <el-col :offset="1" :span="2">联系电话：</el-col>
          <el-col :span="3">
            <el-tag>{{ orderDetail.info.phone }}</el-tag>
          </el-col>
        </el-row>
        <el-row>
          <el-col :offset="2">
            <el-tag>{{ orderDetail.info.address }}</el-tag>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="2">选购商品：</el-col>
          <el-col :span="22">
            <el-row
              v-for="(item, index) in orderDetail.goodsList.goodsList"
              :key="index"
            >
              <el-col :span="2">
                <img
                  style="width: 100px; height: 100px"
                  :src="imageArr[index]"
                />
              </el-col>
              <el-col :span="2">
                <el-tag>{{ item.goodsName }}</el-tag>
              </el-col>
              <el-col :offset="2" :span="1">x1</el-col>
              <el-col :offset="2" :span="1">￥28.8</el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="2">包装：</el-col>
          <el-col :offset="15" :span="2">￥2</el-col>
        </el-row>
        <el-row>
          <el-col :span="2">活动优惠：</el-col>
          <el-col :offset="13" :span="2">
            <el-tag>满50-2</el-tag>
          </el-col>
          <el-col :span="2">￥-2</el-col>
        </el-row>
        <el-row>
          <el-col :span="2">优惠券</el-col>
          <el-col :offset="13" :span="2">
            <el-tag>未选择优惠券</el-tag>
          </el-col>
          <el-col :span="2">￥0</el-col>
        </el-row>
        <el-row>
          <el-col :span="2">配送费</el-col>
          <el-col :offset="13" :span="2">
            <el-tag>配送上门</el-tag>
          </el-col>
          <el-col :span="2">￥0</el-col>
        </el-row>
        <el-row>
          <el-col :offset="15" :span="2">
            <el-tag>合计</el-tag>
          </el-col>
          <el-col :span="2"
            >￥<span class="price">{{ orderDetail.price }}</span></el-col
          >
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import { Random, mock } from 'mockjs'

export default {
  data() {
    return {
      orderDetail: {},
      imageArr: []
    }
  },
  created() {
    const orderList = JSON.parse(window.localStorage.getItem('orderData'))
    const id = parseFloat(this.$route.params.id)
    this.orderDetail = orderList.find(item => {
      return item.orderID === id
    })
    // console.log(this.orderDetail)
    const length = this.orderDetail.goodsList.goodsList.length
    const arr = []
    for (let i = 0; i < length; i++) {
      const data = Random.image(
        '100x100',
        mock('@color'),
        '#fff',
        mock({
          'array|1': ['andremao', 'is', 'cool', 'beautiful']
        }).array
      )

      arr.push(data)
    }
    console.log(arr)
    this.imageArr = arr
  }
}
</script>

<style lang="less" scoped>
.order-detail {
  min-width: 1400px;
  .text-link {
    margin: 20px;
  }
  .detail-content {
    /deep/.el-row {
      margin: 20px 0;
    }
    .price {
      font-size: 18px;
      color: red;
    }
  }
}
</style>
